<template>
    <div id="teaching-statistics">
        <div class="jx-content">
            <div class="search-box">
                <el-form :inline="true" ref="searchForm" :model="searchForm">
                    <el-form-item class="casitem" label="班级 :">
                        <el-cascader
                            class="cascader"
                            :options="data"
                            expand-trigger="hover"
                            :props="cascaderconfig"
                            v-model="selectedOptions"
                            @change="getClass"
                            ></el-cascader>
                    </el-form-item>
                    <!-- <el-form-item>
                        <div class="button-style" @click="getData">搜 索</div>
                    </el-form-item> -->
                    <el-form-item>
                        <span class="subtitle">{{ dataTime }}</span>
                        <span v-if="!isUpDate" class="sdgx" @click="handRefresh">
                            <i class="iconfont icon-refresh"></i>
                            手动更新
                        </span>
                        <span v-else class="sdgx">
                            <i class="el-icon-loading"></i>
                            正在更新
                        </span>
                    </el-form-item>
                    <el-form-item class="fr">
                        <div class="download-style" @click="downloadFilePost">整体数据</div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 圈渐变 -->
        <div>
            <!-- 圈渐变 蓝 -->
            <svg style="position:absolute;left:-99999px;" width="100%" height="100%">
                <defs>
                    <linearGradient id="svgblue" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:#32b0fe" stop-opacity="0.8"></stop>
                        <stop offset="100%" style="stop-color:#3972fd" stop-opacity="1"></stop>
                    </linearGradient>
                </defs>
            </svg>
            <!-- 圈渐变 绿 -->
            <svg style="position:absolute;left:-99999px;" width="100%" height="100%">
                <defs>
                    <linearGradient id="svggreen" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:#3ecfbd" stop-opacity="0.8"></stop>
                        <stop offset="100%" style="stop-color:#21afcb" stop-opacity="1"></stop>
                    </linearGradient>
                </defs>
            </svg>
            <!-- 圈渐变 粉 -->
            <svg style="position:absolute;left:-99999px;" width="100%" height="100%">
                <defs>
                    <linearGradient id="svgpink" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:#fd9091" stop-opacity="0.8"></stop>
                        <stop offset="100%" style="stop-color:#e76581" stop-opacity="1"></stop>
                    </linearGradient>
                </defs>
            </svg>
            <!-- 圈渐变 黄 -->
            <svg style="position:absolute;left:-99999px;" width="100%" height="100%">
                <defs>
                    <linearGradient id="svgyellow" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:#fdb963" stop-opacity="0.8"></stop>
                        <stop offset="100%" style="stop-color:#fc7136" stop-opacity="1"></stop>
                    </linearGradient>
                </defs>
            </svg>
        </div>
        <div class="ts-content" v-show="itemData">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="row-a ts-box" style="height:220px;">
                        <div class="row-a-face">
                            <div class="row-a-face-box">
                                <img :src="itemData.icon" alt="">
                            </div>
                            <div style="margin-top: 10px;">{{ itemData.userName }}</div>
                            <div>主讲教师</div>
                        </div>
                        <div class="row-a-info" style="min-width:200px;">
                            <div class="gread">
                                <div class="fs24">{{ itemData.className }}</div>
                                <div class="fs16">{{ itemData.grade }}年级</div>
                            </div>
                            <div class="pepnum">
                                <div>
                                    <div class="bold blue fs30">{{ itemData.studentNum }}</div>
                                    <div>学生人数</div>
                                </div>
                                <div>
                                    <div class="bold blue fs30">{{ itemData.teacherNum }}</div>
                                    <div>助理教师人数</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="ts-box" style="height:220px;">
                        <div class="ts-title-box">
                            <div class="ts-title"></div>
                            <router-link target="_blank" :to="`/TSAttendanceDetails${toUrl()}`" class="ts-more">详情></router-link>
                        </div>
                        <div class="ts-main" v-if="itemData">
                            <el-progress :width="150" :height="150" style="margin-right:40px;" :stroke-width="10" type="circle" :percentage="itemData.attendanceRate-0" status="text">
                                <div style="font-size:26px;font-weight:bold;color:#1277eb;margin-bottom:6px;">{{ itemData.attendanceRate }}%</div>
                                <div style="font-size:14px;color:#3a3a3a;">出勤率</div>
                            </el-progress>
                            
                            <div>
                                <div><span class="ts-dian"></span>缺勤总次数</div>
                                <div style="margin-left:12px;" class="bold blue fs30">{{ itemData.truantNum }}</div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div v-show="Array.isArray(itemData.examIds) && itemData.examIds.length">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div v-if="itemData.examIds" class="ts-box" style="padding-bottom:40px;">
                            <div class="ts-title-box">
                                <div style="padding: 35px 0 0 20px;" class="fs20 ts-title">{{ barData.examName }}成绩</div>
                                <router-link target="_blank" :to="`/TSExaminationDetails${toUrlExam()}`" class="ts-more">详情></router-link>
                            </div>
                            <div v-show="itemData.examIds.length">
                                <div class="ts-main" style="position:relative;">
                                    <div style="position:absolute;top:0;right:60px;color:#117eca;">
                                        <i class="iconfont icon-xing"></i>
                                        及格率：{{ barData.passedRate }}%
                                    </div>
                                    <div id="mychartBar" style="width:1200px;height:400px;"></div>
                                </div>
                                <div>
                                    <ul class="ts-carousel clearfix">
                                        <li @click="getBarData(item,index);" :class="{'active':barData.barIndex==index}" v-for="(item,index) in itemData.examIds" :key="index"></li>
                                    </ul>
                                </div>
                            </div>
                            <div v-show="!itemData.examIds.length" style="height: 200px;text-align: center;padding: 50px 0 20px;">
                                <img src='../../../assets/images/empty.png'/>
                                <p style="line-height:40px;">暂无数据</p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-row :gutter="20">
                <el-col :span="10">
                    <div class="ts-box">
                        <div class="ts-title-box">
                            <div class="ts-title">实验课总时长</div>
                            <router-link target="_blank" :to="`/TSDurationDetails${toUrl()}`" class="ts-more">详情></router-link>
                        </div>
                        <div class="ts-main" style="height:200px;color:#fff;">
                            <div class="time-box tst-1">
                                <div>
                                    <div>实验视频总时长</div>
                                    <div><span class="fs18">{{ itemData.experimentVideoTime }}</span></div>
                                </div>
                            </div>
                            <div class="time-box tst-2">
                                <div>
                                    <div>实验学习总时长</div>
                                    <div><span class="fs18">{{ itemData.experimentTime }}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="ts-box">
                        <div class="ts-title-box">
                            <div class="ts-title">
                                实验判定
                                <!-- 2021-01-26注释 -->
                                <el-tooltip class="item" effect="dark" placement="bottom">
                                    <div slot="content" style="line-height:24px;">
                                        1、设置实验判定：学生做实验通过预设的实验判定则检测通过。<br/>
                                        2、未设置实验判定：学生浏览过所有实验手册内容即检测通过。
                                    </div>
                                    <i  class="iconfont icon-wenti-m"></i>
                                </el-tooltip>
                            </div>
                            
                            <router-link target="_blank" :to="`/TSExperimentalJudgmentDetails${toUrl()}`" class="ts-more">详情></router-link>
                        </div>
                        <div class="ts-main" style="height:200px;flex-direction: column;">
                            <div>
                                通过率
                                <span class="fs20 bold qblue">{{ itemData.experimentPassedRate }}%</span>
                            </div>
                            <div class="ts-pd">
                                <div :style="`width:${itemData.experimentPassedRate}%`" class="ts-pd1"></div>
                                <div :style="`width:${100-itemData.experimentPassedRate}%`" class="ts-pd2"></div>
                            </div>
                            <div>
                                <span style="margin-right:20px;" class="fs16 bold qblue">通过{{ itemData.experimentPassedNum }}</span>
                                <span class="fs16 bold qred">未通过{{ itemData.experimentUnpassedNum }}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="ts-box">
                        <div class="ts-title-box">
                            <div class="ts-title">实验报告</div>
                            <router-link target="_blank" :to="`/TSExperimentalReportDetails${toUrl()}`" class="ts-more">详情></router-link>
                        </div>
                        <div class="ts-main" style="height:200px;" v-if="itemData">
                            <el-progress :width="150" :height="150" style="margin-right:40px;" :stroke-width="20" type="circle" :percentage="itemData.reportSubmittedRate-0" status="text">
                                <div style="font-size:26px;font-weight:bold;color:#1277eb;margin-bottom:6px;">{{ itemData.reportSubmittedRate }}%</div>
                                <div style="font-size:14px;color:#3a3a3a;">提交率</div>
                            </el-progress>
                            <div>
                                <div class="bold fs20" style="color:#3a71ff;text-align:center;">{{ itemData.reportSubmittedNum }}</div>
                                <div>已提交</div>
                                <div class="bold fs20" style="margin-top:10px;text-align:center;color:#e66480;">{{ itemData.reportUnsubmittedNum }}</div>
                                <div>未提交</div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <div class="ts-box">
                                <div class="ts-title-box">
                                    <div class="ts-title">理论课总时长</div>
                                    <router-link target="_blank" :to="`/TSDurationDetails${toUrl()}`" class="ts-more">详情></router-link>
                                </div>
                                <div class="ts-main" style="height:200px;color:#fff;">
                                    <div class="time-box tst-3">
                                        <div>
                                            <div>理论视频总时长</div>
                                            <div><span class="fs18">{{ itemData.theoryVideoTime }}</span></div>
                                        </div>
                                    </div>
                                    <div class="time-box tst-4">
                                        <div>
                                            <div>理论学习总时长</div>
                                            <div><span class="fs18">{{ itemData.theoryTime }}</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-bottom:0;">
                        <el-col :span="24">
                            <div class="ts-box">
                                <div class="ts-title-box">
                                    <div class="ts-title">随堂练习</div>
                                    <router-link target="_blank" :to="`/TSClassroomPracticeDetails${toUrl()}`" class="ts-more">详情></router-link>
                                </div>
                                <div class="ts-main" style="height:200px;" v-if="itemData">
                                    <el-progress class="sgreen" :width="150" :height="150" style="margin-right:40px;" :stroke-width="20" type="circle" :percentage="itemData.practiceSubmittedRate-0" status="text">
                                        <div style="font-size:26px;font-weight:bold;color:#21aecc;margin-bottom:6px;">{{ itemData.practiceSubmittedRate }}%</div>
                                        <div style="font-size:14px;color:#3a3a3a;">提交率</div>
                                    </el-progress>
                                    <div style="min-width:100px;">
                                        <div class="bold fs20" style="color:#3a71ff;text-align:center;">{{ itemData.practiceSubmittedNum }}</div>
                                        <div style="text-align:center;">已提交</div>
                                    </div>
                                    <div>
                                        <div class="bold fs20" style="color:#e66480;text-align:center;">{{ itemData.practiceUnsubmittedNum }}</div>
                                        <div style="text-align:center;">未提交</div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="14">
                    <div class="ts-box" style="background:#fff;position:relative;">
                        <div class="ts-title-box">
                            <div class="ts-title">随堂提问</div>
                            <router-link target="_blank" :to="`/TSClassQuestioningDetails${toUrl()}`" class="ts-more">详情></router-link>
                        </div>
                        <div class="ts-main" style="height:460px;display:block;">
                            <div style="display:flex;align-items: center;">
                                <div class="fs14" style="min-width:120px;text-align:center;">
                                    <div class="bold fs24 blue">{{ itemData.questionAnwserNum }}</div>
                                    <div>问答回答</div>
                                    <div style="line-height:12px;">总次数</div>
                                </div>
                                <div id="pictorialBar1" style="width: 511px;height:200px;"></div>
                            </div>
                            <div style="height:1px;background:#E8E8E8; width:80%;margin:20px auto;"></div>
                            <div style="display:flex;align-items: center;">
                                <div class="fs14" style="min-width:120px;text-align:center;">
                                    <div class="bold fs24 blue">{{ itemData.choiceAnwserNum }}</div>
                                    <div>判断回答</div>
                                    <div style="line-height:12px;">总次数</div>
                                </div>
                                <div id="pictorialBar2" style="width: 511px;height:200px;"></div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="10">
                    <div class="ts-box">
                        <div class="ts-title-box">
                            <div class="ts-title">问题交流</div>
                            <router-link target="_blank" :to="`/TSProblemCommunicationDetails${toUrl()}`" class="ts-more">详情></router-link>
                        </div>
                        <div class="ts-main" style="height:370px;flex-direction: column;justify-content:center;">
                            <div style="display:flex;">
                                <div>
                                    <img src="../../../assets/images/ts-q1.jpg" alt="">
                                </div>
                                <div style="min-width:100px;margin: 0 60px 0 30px;">
                                    <div class="bold fs30" style="color:#3a71ff;">{{ itemData.problemNum }}</div>
                                    <div>提问问题总数</div>
                                </div>
                                <div>
                                    <img src="../../../assets/images/ts-q2.jpg" alt="">
                                </div>
                            </div>
                            <div style="background: #E8E8E8;width:350px; height:1px;margin:45px 0"></div>
                            <div style="display:flex;">
                                <div>
                                    <img src="../../../assets/images/ts-q3.jpg" alt="">
                                </div>
                                <div style="min-width:100px;margin: 0 85px 0 30px;">
                                    <div class="bold fs30" style="color:#21aecc;">{{ itemData.problemAnwserNum }}</div>
                                    <div>回答问题总数</div>
                                </div>
                                <div style="transform: translate(-14px, 0px);">
                                    <img src="../../../assets/images/ts-q4.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="14">
                    <div class="ts-box" style="background:#fff;">
                        <div class="ts-title-box">
                            <div class="ts-title">
                                章节掌握情况
                                <span style="margin-left:10px;" class="ts-subtitle">显示出错率达到50%以上章节</span>
                            </div>
                            <!-- <router-link to="#" class="ts-more">详情></router-link> -->
                        </div>
                        <div class="ts-main" style="display:block;height:370px;padding:10px 0 0 0;box-sizing: border-box;">
                            <div class="col-chapter" v-if="chapterData.length">
                                <!--75%出错率是粉的，以下是黄的-->
                                <div :class="{'xq-pink':item.practiceErrRate>75}" class="ts-lastcol" v-for="(item,index) in chapterData" :key="index">
                                    <div style="width:54px;text-align:center;margin-left:33px;">
                                        <el-progress :percentage="item.practiceErrRate" :width="54" :height="54" style="margin-right:40px;" :stroke-width="4" type="circle" status="text">
                                            <div class="xq-color" style="font-size:14px;">{{ item.practiceErrRate }}%</div>
                                        </el-progress>
                                        <div class="xq-color" style="font-size:14px;line-height: 12px;">出错率</div>
                                    </div>
                                    <div style="width:500px;margin-left:20px;">
                                        <div :title="item.name" class="beyond-hiding" style="width:320px;">{{ item.name }}</div>
                                        <el-progress class="linepink" :percentage="item.practiceErrRate"></el-progress>
                                    </div>
                                    <router-link target="_blank" class="ts-xq xq-bg" :to="`/Teaching/MyCourses/StatisticsClassExercises${toUrlChapter(item)}`">详情>{{ item.id }}</router-link>
                                </div>
                            </div>
                            <div v-else class="empty">
                                <div style="padding:110px 0 0;text-align:center;">
                                    <img src='../../../assets/images/empty.png'/>
                                    <p style="line-height:40px;">暂无数据</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        
        <div class="empty ts-content" v-show="itemData == ''" >
            <div class="ts-box" style="padding:150px 0 0;text-align:center;">
                <img src='../../../assets/images/empty.png'/>
                <p style="line-height:40px;">暂无数据</p>
            </div>
        </div>
    </div>
</template>
<script>
    import * as echarts from 'echarts';
    export default {
        name:'teaching-statistics',
        data () {
            return{
                classId:'',
                courseId:'',
                courseName:'',
                //所有数据
                itemData:'',
                tpd:50,
                searchForm:{
                    chapterId:'',
                },

                chapterList:[],
                selectedOptions:[],
                data:[],
                _cascaderconfig: {
                  value: "name",
                  label: "name",
                },
                idlist:[],
                //数据统计截止至
                dataTime:'',
                barData:{
                    //条形图索引
                    barIndex:0,
                    //条形图及格率
                    passedRate:'',
                    //条形图名称
                    examName:'考试',
                    //第一个考试id
                    firExamId:'',
                },
                //章节掌握数据
                chapterData:[],
                get cascaderconfig() {
                  return this._cascaderconfig;
                },
                set cascaderconfig(value) {
                  this._cascaderconfig=value;
                },
                websock:null,
                //正在更新
                isUpDate:false,
            }
        },
        
        created() {   
           this.courseId = this.$localstorage.getLocalStorage('setCourseId');
           console.log(this.courseId,554433);
        },
        destroyed() {
            this.websock.close() //离开路由之后断开websocket连接
        },
        mounted(){
            this.init();
            this.$nextTick(function(){
                this.initWebSocket();
            });
        },
        methods:{
            init(){
                this.getCourseName();
                this.getClass();
            },
//socket
            initWebSocket(){ //初始化websocket
                let hostname = window.location.host;
                const wsuri = "ws://" + hostname + "/tes/ws/global";
                this.websock = new WebSocket(wsuri);
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onclose = this.websocketclose;
            },
            websocketonopen(){ //连接建立之后执行send方法发送数据
                console.log('链接成功');
                this.isUpDate = true;
                //let actions = {"teaching-statistics":"12345"};
                //this.websocketsend(JSON.stringify(actions));
            },
            websocketonerror(){//连接建立失败重连
                this.initWebSocket();
            },
            websocketonmessage(e){ //数据接收
                const redata = JSON.parse(e.data);
                console.log(redata,3212);
                let classId = this.classId;
                console.log(classId,redata.classId);
                if(redata.type == 50 && classId == redata.classId){
                    //this.isUpDate = false;
                    this.$message.success('更新成功');
                    this.getAllData(classId);
                }
            },
            websocketsend(Data){//数据发送
                this.websock.send(Data);
            },
            websocketclose(e){  //关闭
                console.log('断开连接',e);
            },
//socket end
            selectChange(){

            },
            toUrl(){
                let self = this;
                let courseId = self.courseId;
                let classId = self.classId;
                //console.log(courseId,classId,2);
                return `?classId=${classId}&courseId=${courseId}`;
            },
            //考试专用
            toUrlExam(){
                let self = this;
                let courseId = self.courseId;
                let classId = self.classId;
                let firExamId = self.barData.firExamId;
                //console.log(courseId,classId,2);
                return `?classId=${classId}&courseId=${courseId}&examId=${firExamId}`;
            },
            //章节掌握情况专用
            toUrlChapter(row){
                let self = this;
                let courseId = self.courseId;
                let courseName = self.courseName;
                let classId = self.classId;
                let className = self.itemData.className;
                let chapterId = row.chapterId;
                let chapterName = row.name;
                return `?courseId=${courseId}&chapterId=${chapterId}&classId=${classId}&courseName=${courseName}&chapterName=${chapterName}&className=${className}`;
            },
            //获取课程名称
            getCourseName(){
                let self = this;
                let courseId = self.courseId;
                self.$http.get(`/tes/course/${courseId}/chapter/0`).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        console.log(res,26);
                        self.courseName = res.data.courseName;

                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //获取班级
            getClass(){
                let self = this;
                ///course/课程id/search/list-class?allFlag=false
                self.$http.get('/tes/course/'+self.courseId+'/search/list-class?allFlag=false&defaultClassFlag=true').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        console.log(res,26);
                        self.data = res.data
                        self.filterInitData(res.data)
                        self.ChangeList()
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //过滤数据获得默认值
            filterInitData(data){
                let self = this;
                data.forEach(function(item) {
                if (item.defaultedClass == true) {
                    self.selectedOptions.push(item.name)
                }
                if (item.children) {
                    item.children.forEach(function(it) {
                    if (it.defaultedClass == true) {
                        self.selectedOptions.push(it.name)
                    }
                    if (it.children) {
                        it.children.forEach(function(itChild) {
                        if (itChild.defaultedClass == true) {
                            self.selectedOptions.push(itChild.name)
                            }
                        })
                    }
                    })
                }
                });
                console.log(self.selectedOptions, 99)
                return self.selectedOptions
            },
            //获取id集合
            ChangeList(){
                let self = this
                if(self.selectedOptions[0]===undefined ||  self.selectedOptions[0]=='全部'){
                    self.selectedOptions[0]=''
                    self.selectedOptions[1]=''
                    self.selectedOptions[2]=''
                }else if(self.selectedOptions[1]===undefined || self.selectedOptions[1]=='全部'){
                    self.selectedOptions[1]=''
                    self.selectedOptions[2]=''
                }else if(self.selectedOptions[2]===undefined || self.selectedOptions[2]=='全部'){
                    self.selectedOptions[2]=''
                }
                //断开socket
                //self.websocketclose();
                self.$http.post('/tes/course/'+self.courseId+'/search/class',{
                    status :self.selectedOptions[0],
                    grade :self.selectedOptions[1],
                    name: self.selectedOptions[2]
                }) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        console.log(self.selectedOptions,225567);
                        self.idlist=res.data
                        self.classId = res.data[0];
                        self.getAllData(res.data[0]);
                        //self.getInit()
                    }else if(res.code == '404'){
                        self.$message(res.message)
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                        console.log(err)
                })
            },
            //获取所有数据
            getAllData(classId){
                this.getDataTime(classId);
                this.getData(classId);
                this.getChapterData(classId);
            },
            //获取数据统计截止时间
            getDataTime(classId){
                let self = this;
                self.$http.get(`/tes/statistic/class/${classId}/update-time`).then((response) => {
                    let res = response.data
                    //时间
                    if(res.code == '200') {
                        console.log(res,223);
                        self.dataTime = `数据统计截止至 ${res.data}`;
                        self.isUpDate = false;
                    }
                    //暂未更新
                    if(res.code == '404'){
                        self.dataTime = '';
                        self.isUpDate = false;
                    }
                    //统正在对班级更新
                    if(res.code == '600100'){
                        self.dataTime = res.message;
                        self.isUpDate = true;
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //手动更新
            handRefresh(){
                let self = this;
                let classId = self.classId;
                self.$http.post(`/tes/statistic/class/${classId}`).then((response) => {
                    let res = response.data;
                    if(res.code == '200'){
                        //self.$message.success(res.message)
                        self.getDataTime(classId);
                    }
                    else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //获取页面数据
            getData(classId){
                let self = this;
                let courseId = self.courseId;
                let myChart2 = echarts.init(document.getElementById('pictorialBar1'));
                myChart2.showLoading({
                    text: '数据正在加载...',
                });
                let myChart3 = echarts.init(document.getElementById('pictorialBar2'));
                myChart3.showLoading({
                    text: '数据正在加载...',
                });

                self.$http.get(`/tes/statistic/course/${courseId}/class/${classId}`).then((response) => {
                    let res = response.data;
                    if(res.code == '200'){
                        self.itemData = res.data;
                        console.log(res.data,3333334);
                        //绘图
                        self.drawChartpb1(res.data);
                        self.drawChartpb2(res.data);
                        if(res.data.examIds.length){
                            //条形图获取绘图
                            self.getBarData(res.data.examIds[0],0);
                            //赋值第一个考试id
                            self.barData.firExamId = res.data.examIds[0] || 0;
                        }
                        
                    }
                    //没数据
                    else if(res.code == '404'){
                        self.itemData = '';
                    }
                    else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //条形图获取 考试成绩
            getBarData(examId,index){
                let self = this;
                //加载echarts图形
                self.$nextTick(function(){
                    let myChart = echarts.init(document.getElementById('mychartBar'));
                    myChart.showLoading({
                        text: '数据正在加载...',
                    });
                });
                self.barData.barIndex = index;
                self.barData.firExamId = examId;
                let courseId = self.courseId;
                let classId = self.classId;
                self.$http.get(`/tes/statistic/course/${courseId}/class/${classId}/exam/${examId}`).then((response) => {
                    let res = response.data;
                    if(res.code == '200'){
                        console.log(res,'条形图');
                        //及格率
                        self.barData.passedRate = res.data.passedRate;
                        //考试名称
                        self.barData.examName = res.data.examName;
                        //绘图
                        self.drawChart(res.data);
                    }
                    //没数据
                    else if(res.code == '404'){

                    }
                    else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //绘图条形图
            drawChart(res){
                let that = this;
                console.log(res,223344);
                let xData = res.info.map(item=>item.userName);
                let serData = res.info.map(item=>item.score);
                let averageScore = res.averageScore;
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('mychartBar'));
                // 指定图表的配置项和数据
                let option = {
                    title: {
                        //text: 'ECharts 入门示例'
                    },
                    grid:{
                        left:'80',
                        right:'80'
                    },
                    tooltip: {
                        trigger:'axis',
                        formatter : function(param){
                            //let index = param[0].dataIndex;
                            let name = '姓名：' + param[0].axisValue;
                            let score = '分数：' + param[0].value + '分';
                            let rank = '名次：第' + (param[0].dataIndex + 1) + '名';
                            return name + '<br/>' + score + '<br/>' + rank;
                        },
                    },
                    dataZoom:[
                        {
                            type:'inside'
                        },
                        {
                            type:'slider',
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }
                    ],
                    legend: {
                        //data:['销量']
                    },
                    xAxis: {
                        name:'',
                        data: xData
                    },
                    yAxis: {
                        name:"分数"
                    },
                    
                    series: [{
                        type: 'bar',
                        data: serData,
                        itemStyle:{
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#3a69fd'
                                }, {
                                    offset: 1,
                                    color: '#33a9fe'
                                }]),
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#89a5fe'
                                }, {
                                    offset: 1,
                                    color: '#85cbfe'
                                }]),
                            }
                        },
                        markLine : {
                        　　data : [
                                {
                                    silent:false,  
                                    label:{
                                        // formatter:"平均分:" + res[0].avg +"分",
                                        formatter:"平均分:" + averageScore +"分",
                                    },
                                    // yAxis:res[0].avg           // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                                    yAxis:averageScore           // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                            
                                }
                        　　]
                        }
                    }]
                };
                myChart.clear();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart.hideLoading();
            },
            
            //绘图象形图1
            drawChartpb1(res){
                let that = this;
                console.log(res,223344);
                let circle = 'image://';
                let circleb = 'image://';
                let labelSetting = {
                    normal: {
                        show: true,
                        position: 'right',
                        offset: [10, 0],
                        textStyle: {
                            fontSize: 16
                        }
                    }
                };
                //let maxData = 5000;
                let objres = {
                    //优，良，差
                    num:[res.questionAnwserType1Num,res.questionAnwserType2Num,res.questionAnwserType3Num],
                    //百分比
                    bi:[res.questionAnwserType1Rate,res.questionAnwserType2Rate,res.questionAnwserType3Rate],
                };
                console.log(objres,111);
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('pictorialBar1'));
                // 指定图表的配置项和数据
                let option = {
                    //tooltip: {},
                    xAxis: {
                        show:false,
                        splitLine: {show: false},
                        offset: 10,
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            margin: 10
                        }
                    },
                    yAxis: {
                        data: [
                            {
                                value:'优秀',
                                textStyle: {
                                    color: '#40a5ff',
                                }
                            },
                            {
                                value:'良好',
                                textStyle: {
                                    color: '#fc6d34',
                                }
                            },
                            {
                                value:'差劲',
                                textStyle: {
                                    color: '#e66480',
                                }
                            }],
                        inverse: true,
                        axisTick: {show: false},
                        axisLine: {show: false},
                        axisLabel: {
                            margin: 10,
                            color: '#40a5ff',
                            fontSize: 14
                        }
                    },
                    grid: {
                        top: 'center',
                        height: 150,
                        left: 50,
                        right: 100
                    },
                    itemStyle:{
                        // borderWidth:-2
                    },
                    series: [
                    {
                        type: 'bar',
                        barWidth: '15',
                        barGap: '-100%',
                        
                        data: [{
                            value:objres.num[0],
                            itemStyle:{
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#41c4ff'
                                }, {
                                    offset: 1,
                                    color: '#3f72ff'
                                }]),
                            },
                        },
                        {
                            value:objres.num[1],
                            itemStyle:{
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#fdb65f'
                                }, {
                                    offset: 1,
                                    color: '#fc6c33'
                                }]),
                            },
                        },{
                            value:objres.num[2],
                            itemStyle:{
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#fc8b8e'
                                }, {
                                    offset: 1,
                                    color: '#e66480'
                                }]),
                            },
                        }],
                    },
                    {
                        type: 'pictorialBar',
                        symbol: circle,
                        symbolRepeat: 'fixed',
                        symbolMargin: '0',
                        symbolClip: true,
                        symbolSize: [13,16],
                        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        //     offset: 0,
                        //     color: 'red'
                        // }, {
                        //     offset: 1,
                        //     color: 'blue'
                        // }]),
                        //symbolBoundingData: maxData,
                        data: objres.num,
                    
                        z: 10
                    }, 
                    //灰底
                    {
                        // full data
                        type: 'pictorialBar',
                        itemStyle: {
                            normal: {
                                opacity: .1
                            }
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                let v = params.value;
                                let b = objres.bi[params.dataIndex];
                                return `${v}次(${b} %)`;
                            },
                            position: 'right',
                            offset: [10, 0],
                            color: '#2c5a83',
                            fontSize: 14
                        },
                        animationDuration: 0,
                        symbolRepeat: 'fixed',
                        symbolMargin: '0',
                        symbol: circleb,
                        symbolSize: [13,16],
                        //symbolBoundingData: maxData,
                        barMinHeight:1,
                        data: objres.num,
                        z: 5
                    }]
                };
                myChart.clear();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart.hideLoading();
            },
            
            //绘图象形图2
            drawChartpb2(res){
                let that = this;
                console.log(res,223344);
                let circle = 'image://';
                let circleb = 'image://';
                let maxData = 5000;
                let objres = {
                    //正确，错误
                    num:[res.choiceAnwserType1Num,res.choiceAnwserType2Num],
                    //百分比
                    bi:[res.choiceAnwserType1Rate,res.choiceAnwserType2Rate],
                };
                // let objres = {
                //     //正确，错误
                //     num:[res.choiceAnwserType1Num,res.choiceAnwserType2Num],
                //     //百分比
                //     bi:[res.choiceAnwserType1Rate,res.choiceAnwserType2Rate],
                // };
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('pictorialBar2'));
                // 指定图表的配置项和数据
                let option = {
                    //tooltip: {},
                    xAxis: {
                        show:false,
                        splitLine: {show: false},
                        offset: 10,
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            margin: 10
                        }
                    },
                    yAxis: {
                        data: [
                            {
                                value:'正确',
                                textStyle: {
                                    color: '#40a5ff',
                                }
                            },
                            {
                                value:'错误',
                                textStyle: {
                                    color: '#e66480',
                                }
                            }],
                        inverse: true,
                        axisTick: {show: false},
                        axisLine: {show: false},
                        axisLabel: {
                            margin: 10,
                            color: '#40a5ff',
                            fontSize: 14
                        }
                    },
                    grid: {
                        top: 'center',
                        height: 150,
                        left: 50,
                        right: 100
                    },
                    itemStyle:{
                        borderWidth:0
                    },
                    series: [
                    {
                        type: 'bar',
                        barWidth: '15',
                        barGap: '-100%',
                        
                        data: [{
                            value:objres.num[0],
                            itemStyle:{
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#41c4ff'
                                }, {
                                    offset: 1,
                                    color: '#3f72ff'
                                }]),
                            },
                        },{
                            value:objres.num[1],
                            itemStyle:{
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#fc8b8e'
                                }, {
                                    offset: 1,
                                    color: '#e66480'
                                }]),
                            },
                        }],
                    },
                    {
                        type: 'pictorialBar',
                        symbol: circle,
                        symbolRepeat: 'fixed',
                        symbolMargin: '0',
                        symbolClip: true,
                        symbolSize: [13,16],
                        //symbolBoundingData: maxData,
                        data: objres.num,
                    
                        z: 10
                    }, 
                    //灰底
                    {
                        // full data
                        type: 'pictorialBar',
                        itemStyle: {
                            normal: {
                                opacity: .1
                            }
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                let v = params.value;
                                let b = objres.bi[params.dataIndex];
                                return `${v}次(${b} %)`;
                            },
                            position: 'right',
                            offset: [10, 0],
                            color: '#2c5a83',
                            fontSize: 14
                        },
                        animationDuration: 0,
                        symbolRepeat: 'fixed',
                        symbolMargin: '0',
                        symbol: circleb,
                        symbolSize: [13,16],
                        //symbolBoundingData: 10,
                        barMinHeight:1,
                        data: objres.num,
                        z: 5
                    }]
                };
                myChart.clear();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart.hideLoading();
            },
            //章节掌握情况
            getChapterData(classId){
                let self = this;
                let courseId = self.courseId;
                self.$http.get(`/tes/statistic/course/${courseId}/class/${classId}/practice?errorRate=50`)
                .then((response) => {
                    let res = response.data;
                    if(res.code == '200'){
                        console.log(res.data,667); 
                        self.chapterData = res.data;
                    }
                    //没数据
                    else if(res.code == '404'){
                        self.chapterData = [];
                    }
                    else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //下载
            downloadFilePost(){
                let self = this
                let courseId = self.courseId;
                let classId = self.classId;
                let className = self.selectedOptions[2];
                self.downloadStatus = true
                self.downloadText = '下载中'
                self.$http.post(`/tes/statistic/course/${courseId}/class/${classId}/download`,{},{responseType: 'blob'}) .then((response) => {
                    let contentType = response.headers["content-type"]
                    console.log(response,22);
                    if (contentType == "application/json;charset=UTF-8") {
                        let codeMessage = response.headers["code-message"];
                        console.log(codeMessage);
                        let str = '';
                        if(codeMessage == 404){
                            str = '暂无统计';
                        }
                        if(codeMessage == 500){
                            str = '服务器内部错误';
                        }
                        if(codeMessage == 600100){
                            str = '当前班级正在统计中，请稍后再试';
                        }
                        self.$message.error(str);
                    } else {
                        let blob = new Blob([response.data], {type: response.headers['content-disposition']});
                        let url = window.URL.createObjectURL(blob);
                        //let fileName = response.headers['content-disposition'].split(";")[1].split("filename=")[1];
                        let fileName = `${className}班级的课程统计.xls`;
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href = url;
                        downloadElement.download = fileName; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        document.body.removeChild(downloadElement); //下载完成移除元素
                        window.URL.revokeObjectURL(url);
                        self.downloadStatus = false
                        self.downloadText = ''
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        
        }
    }
</script>
<style lang="scss">
    #teaching-statistics{
        background: #f8f8f8;
        min-height: 500px;
        width: 1200px;
        margin: 0px auto 100px;
        color: #3A3A3A;
        .ts-dian{
            width: 6px;
            height: 6px;
            background: #DDDDDD;
            border-radius: 50%;
            display: inline-block;
            margin-right: 6px;
            transform: translate(0px, -3px);
        }
        .el-form-item{
            vertical-align:middle;
            .el-form-item__content{
                vertical-align: baseline;
            }
        }
        .ts-content{
            margin-top:20px;
            line-height: 30px;
        }
        .sdgx{
            color:#385899;
            font-size: 16px;
            cursor: pointer;
            margin-left:20px;
        }
        .subtitle{
            font-size: 14px;
            color:#989898;
        }
        .el-progress-circle .el-progress-circle__track{
            stroke:#f0f0f0;
        }
        .el-progress-circle__path {
            stroke: url(#svgblue);
        }
        .sgreen .el-progress-circle__path{
            stroke: url(#svggreen);
        }
        .spink .el-progress-circle__path{
            stroke: url(#svgpink);
        }
        .syellow .el-progress-circle__path{
            stroke: url(#svgyellow);
        }
        .ts-title-box{
            display:flex;
            justify-content: space-between;
            padding:0 20px;
            line-height: 40px;
            font-size: 16px;
            color:#3A3A3A;
            a{
                color:#727272;
            }
            .ts-subtitle{
                color:#989898;
                font-size:14px;
            }
            .ts-more{
                font-size: 14px;
                color:#acacac;
                &:hover{
                    color:#1277eb;
                }
            }
        }
        .ts-main{
            display:flex;
            justify-content: center;
            align-items: center;
            padding:0 30px;
        }
        .ts-box{
            min-height:200px;
            font-size: 16px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);    
            background: #fff;
            border-radius: 3px;
        }
        .time-box{
            min-width:200px;
            height:110px;
            background:Red;
            border-radius: 8px;
            margin:0 10px;
            padding:24px 0 0 20px;
            font-size: 16px;
            box-sizing: border-box;
        }
        .tst-1{
            background: url('../../../assets/images/tst-1.png') no-repeat 0 0;
        }
        .tst-2{
            background: url('../../../assets/images/tst-2.png') no-repeat 0 0;
        }
        .tst-3{
            background: url('../../../assets/images/tst-3.png') no-repeat 0 0;
        }
        .tst-4{
            background: url('../../../assets/images/tst-4.png') no-repeat 0 0;
        }
        .ts-pd{
            background:red;
            width:100%;
            height:20px;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            margin:20px 0;
            .ts-pd1{
                transition: .5s;
                height:20px;
                background-image: linear-gradient(to right,#3ecfbd,#1fadcc);
            }
            .ts-pd0{
                transition: .5s;
                width:1%;
                height:20px;
                background: #fff;
            }
            .ts-pd2{
                transition: .5s;
                height:20px;
                background-image: linear-gradient(to right,#fa274e,#f8a269);
            }
        }
        .el-row{
            margin-bottom:20px;
        }
        .blue{
            color:#1277eb;
        }
        .qblue{
            color:#21aecc;
        }
        .qred{
            color:#f9645a;
        }
        .bold{
            font-weight: bold;
        }
        .ts-carousel{
            display:flex;
            justify-content: center;
            padding:20px 0;
            li{
                cursor: pointer;
                width:20px;
                height:5px;
                background:#eaeaea;
                margin:0 4px;
            }
            li.active{
                background:#1277eb;
            }
        }
        .jx-content{
            margin: 0px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);    
            border-radius:0;
            padding-bottom:0px;
        }
        .ts-box{
            // background:pink;
        }
        .row-a{
            display:flex;
            .row-a-face{
                margin:10px 20px 0 10px;
                padding:20px 0 0;
                min-width: 200px; 
                text-align: center;
                font-size:14px;
                .row-a-face-box{
                    display: inline-block;
                    width:84px;
                    height:84px;
                    border-radius: 100px;
                    background:#333;
                    overflow: hidden;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
            }
            .row-a-info{
                display:flex;
                margin-right:40px;
                flex-direction: column;
                justify-content: space-around;
                padding:22px 0;
                .gread{
                    .fs24{
                        color:#3A3A3A;
                    }
                }
                .pepnum{
                    display:flex;
                    font-size:14px;
                    >div{
                        flex:1;
                    }
                }
            }
        }
        .col-chapter{
            height:333px;    
            box-sizing: border-box;
            overflow-y: auto;
            &::-webkit-scrollbar {
                width: 5px;
            }

            &::-webkit-scrollbar-thumb {
                background: #eaeaea;
            }
            .ts-lastcol{
                display:flex;
                align-items: center;
                position:relative;
                min-height:111px;
                padding:0 33px 0 0;
                .el-progress-circle__path{
                    stroke: url(#svgyellow);
                }
                .xq-color{
                    color:#fc6b33;
                }
                .xq-bg{
                    background: rgb(252, 107, 51);
                    &:hover{
                        background: rgba(252, 107, 51,.8);
                    }
                }
                .el-progress-bar__inner{
                    background-image: linear-gradient(to right, #fdb75f , #fc6b33);
                }
                .ts-xq{
                    position:absolute;
                    right:33px;
                    top:14px;
                    color:#fff;
                    padding:0px 14px;
                    border-radius:20px;
                    font-size: 14px;
                }
                &::before{
                    content:'';
                    width:2px;
                    height:111px;
                }
                &:hover{
                    background:#F5F7FB;
                    &::before{
                        content:'';
                        width:2px;
                        height:111px;
                        background:#FC6B33;
                        
                    }
                }
            }
            .xq-pink{
                &:hover{
                    background:#F5F7FB;
                    &::before{
                        content:'';
                        width:2px;
                        height:111px;
                        background:#E56280;
                        
                    }
                }
                .el-progress-circle__path{
                    stroke: url(#svgpink);
                }
                .xq-color{
                    color:#e76581;
                }
                .xq-bg{
                    background: rgb(231, 101, 129);
                    &:hover{
                        background: rgba(231, 101, 129,.8);
                    }
                }
                .el-progress-bar__inner{
                    background-image: linear-gradient(to right, #fd8d8e , #e56280);
                }
            }
        }
    }
</style>